<template>
<div class="comments-message-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar 
        title="评论和@" 
        left-arrow 
        @click-left="onClickLeft" 
        fixed
    />
    
    <div class="content">
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <!-- 加载中状态 -->
            <div class="loading-container" v-if="loading">
                <van-loading type="spinner" color="#ff2442" />
            </div>
            
            <!-- 空状态 -->
            <div class="empty-state" v-else-if="isEmpty">
                <van-empty image="comment" description="暂无评论和@消息" />
            </div>
            
            <!-- 消息列表 -->
            <div class="message-list" v-else>
                <div class="message-item" v-for="item in commentMessages" :key="item.id" @click="goToDetail(item)">
                    <div class="avatar-container">
                        <img :src="item.avatar" :alt="item.username" class="avatar">
                    </div>
                    
                    <div class="message-content">
                        <div class="message-header">
                            <span class="username">{{ item.username }}</span>
                            <span class="time">{{ formatTime(item.time) }}</span>
                        </div>
                        
                        <div class="message-body">
                            <span class="action-text">{{ item.type === 'comment' ? '评论了你的' : '@了你的' }}</span>
                            <span class="content-type">{{ getContentType(item.replyToType) }}</span>
                        </div>
                        
                        <div class="comment-content">{{ item.content }}</div>
                        
                        <div class="original-content" v-if="item.originalContent">
                            <span class="original-prefix">原内容：</span>
                            <span class="original-text">{{ item.originalContent }}</span>
                        </div>
                    </div>
                    
                    <div class="content-image" v-if="item.image">
                        <img :src="item.image" :alt="item.content">
                    </div>
                </div>
                
                <!-- 加载更多 -->
                <div class="load-more" v-if="hasMore" @click="loadMore">
                    <van-loading v-if="loadingMore" type="spinner" size="20" />
                    <span v-else>加载更多</span>
                </div>
                
                <!-- 无更多数据 -->
                <div class="no-more" v-else-if="!isEmpty">
                    <span>没有更多数据了</span>
                </div>
            </div>
        </van-pull-refresh>
    </div>
</div>
</template>

<script>
import { defineComponent } from 'vue'
import { Toast } from 'vant'
import { messageApi } from '@/api/message'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

// 配置dayjs使用相对时间插件
dayjs.extend(relativeTime)

export default defineComponent({
    name: 'CommentsMessagePage',
    
    data() {
        return {
            // 消息数据
            commentMessages: [],
            // 是否正在加载
            loading: false,
            // 是否正在下拉刷新
            refreshing: false,
            // 是否正在加载更多
            loadingMore: false,
            // 是否有更多数据
            hasMore: true,
            // 当前页码
            page: 1,
            // 每页数据量
            pageSize: 10
        }
    },
    
    computed: {
        // 是否为空状态
        isEmpty() {
            return this.commentMessages.length === 0
        }
    },
    
    created() {
        // 获取消息数据
        this.fetchMessages()
    },
    
    methods: {
        // 返回上一页
        onClickLeft() {
            this.$router.back()
        },
        
        // 获取消息
        async fetchMessages(isLoadMore = false) {
            if (!isLoadMore) {
                this.loading = true
                this.page = 1
            } else {
                this.loadingMore = true
            }
            
            try {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize
                }
                
                const data = await messageApi.getCommentMessages(params)
                
                if (isLoadMore) {
                    // 加载更多，追加数据
                    this.commentMessages = [...this.commentMessages, ...data.list]
                } else {
                    // 初次加载或刷新，替换数据
                    this.commentMessages = data.list || []
                }
                
                // 更新是否有更多数据
                this.hasMore = data.hasMore
                
                // 页码加1
                this.page++
            } catch (error) {
                console.error('获取评论消息失败', error)
                Toast('获取消息失败，请重试')
            } finally {
                this.loading = false
                this.loadingMore = false
                this.refreshing = false
            }
        },
        
        // 下拉刷新
        onRefresh() {
            this.fetchMessages()
        },
        
        // 加载更多
        loadMore() {
            if (this.loadingMore || !this.hasMore) return
            this.fetchMessages(true)
        },
        
        // 跳转到详情页
        goToDetail(item) {
            // 根据内容类型跳转
            if (item.replyToType === 'post') {
                // 跳转到动态详情
                this.$router.push(`/post/${item.postId}`)
            } else if (item.replyToType === 'comment') {
                // 跳转到评论详情，通常是跳转到包含该评论的动态
                this.$router.push(`/post/${item.postId}?commentId=${item.commentId}`)
            }
        },
        
        // 格式化时间
        formatTime(time) {
            if (!time) return ''
            
            const now = dayjs()
            const messageTime = dayjs(time)
            
            // 如果是今天
            if (now.isSame(messageTime, 'day')) {
                return messageTime.format('HH:mm')
            }
            
            // 如果是昨天
            if (now.subtract(1, 'day').isSame(messageTime, 'day')) {
                return '昨天 ' + messageTime.format('HH:mm')
            }
            
            // 如果是本周
            if (now.isSame(messageTime, 'week')) {
                const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
                return weekdays[messageTime.day()]
            }
            
            // 如果是今年
            if (now.isSame(messageTime, 'year')) {
                return messageTime.format('MM-DD')
            }
            
            // 其他情况
            return messageTime.format('YYYY-MM-DD')
        },
        
        // 获取内容类型显示文本
        getContentType(type) {
            const typeMap = {
                post: '笔记',
                comment: '评论',
                like: '点赞',
                collect: '收藏'
            }
            
            return typeMap[type] || '内容'
        }
    }
})
</script>

<style scoped>
.comments-message-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.content {
    padding-top: 46px;
    min-height: calc(100vh - 46px);
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

.empty-state {
    padding: 40px 0;
}

.message-list {
    background-color: #fff;
}

.message-item {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
}

.avatar-container {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    flex-shrink: 0;
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.message-content {
    flex: 1;
    overflow: hidden;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.username {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.time {
    font-size: 12px;
    color: #999;
}

.message-body {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.action-text {
    margin-right: 4px;
}

.content-type {
    color: #1989fa;
}

.comment-content {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    word-break: break-all;
}

.original-content {
    font-size: 13px;
    color: #999;
    background-color: #f7f8fa;
    padding: 8px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.original-prefix {
    color: #666;
}

.content-image {
    width: 60px;
    height: 60px;
    margin-left: 12px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.content-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.load-more, .no-more {
    text-align: center;
    padding: 16px;
    color: #999;
    font-size: 14px;
}
</style> 